<!-- BeginDsi "dsi/head.html" -->
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Embedthis GoAhead 3.1.1 Documentation</title>
    <meta name="keywords" content="embedded web server, web server software, embedded HTTP, application web server, 
        embedded server, small web server, HTTP server, library web server, library HTTP, HTTP library" />
    <meta name="description" content="Embedthis Sofware provides commercial and open source embedded web servers for 
        devices and applications." />
	<meta name="robots" content="index,follow" />
	<link href="../../../doc.css" rel="stylesheet" type="text/css" />
	<link href="../../../print.css" rel="stylesheet" type="text/css" media="print"/>
    <!--[if IE]>
    <link href="../../../iehacks.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    <link href="http://www.google.com/cse/style/look/default.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-179169-5']);
        _gaq.push(['_trackPageview']);
        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>
</head>

<body>
    <div class="top">
        <a class="logo" href="http://embedthis.com/products/goahead/">&nbsp;</a>
        <div class="topRight">
            <div class="search">
                <div id="cse-search-form"></div>
                <div class="version">Embedthis GoAhead 3.1.1</div>
            </div>
        </div>
        <div class="crumbs">
            <a href="../../../index.html">Home</a>
<!-- EndDsi -->
             &gt; <a href="index.html">Users Guide</a> &gt; <b>JST</b>
        </div>
    </div>
    <div class="content">
        <div class="contentRight">
            <h1>Quick Nav</h1>
            <ul class="nav">
            </ul>
<!-- BeginDsi "dsi/usersGuideSeeAlso.html" -->
            <h1>See Also</h1>
            <ul class="nav">
                <li><a href="../../../guide/goahead/users/index.html">User Guide Overview</a></li>
                <li><a href="../../../guide/goahead/users/authentication.html">User Authorization</a></li>
                <li><a href="../../../guide/goahead/users/logFiles.html">Log Files</a></li>
                <li><a href="../../../guide/goahead/users/security.html">Security Considerations</a></li>
                <li><a href="../../../guide/goahead/users/ssl.html">SSL</a></li>
                <li><a href="../../../guide/goahead/users/man.html">Man Pages</a></li>
            </ul>
<!-- EndDsi -->
        </div>
<!--
write
defining functions
-->
        <div class="contentLeft">
            <h1>Javascript Templates (JST)</h1>
            <p>Javascript Templates (JST) enable the easy creation of dynamic web pages and applications.
            Javascript Templates are HTML web pages that execute embedded Javascript on the server before rendering the page
            back to the client.</p>
            <p>JST is an extensible environment and allows the direct binding of C functions to Javascript functions, so
            that a JST web page can easily access device or system data.</p>
            <h2>JST Handler</h2>
            <p>A JST document has an <i>.jst</i> extension and is processed by the <i>jst</i> handler. The JST handler
            executes JST scripts and replaces them with the corresponding script results. The user sees a normal
            HTML page, but it is one that was dynamically created by the JST handler.</p>
            <h2>JST Delimiters</h2>
            <p>To create a JST script field in a JST document, use the <i>&lt;%</i> and <i>%&gt;</i> delimiters. 
            For example, the following
            JavaScript will output "Hello World" in place of the JST-delimited field:</p>
            <pre>Today is &lt;% write("Hello" + " World"); %&gt;</pre>
            <h2>Scripting Execution</h2>
            <p>When a user's browser requests a JST document, the JST handler is invoked to serve the request.
            The JST document is read from the file system in a one-pass operation. HTML text before the JST
            delimiters is copied directly to the client. If JST delimiters are found, the script between the
            delimiters is executed and the resulting text is written to the client. The process continues until the end of
            the document.</p>
            <h2>Standard Functions</h2>
            <p>JST defines one standard function: <i>write</i>. This function writes data back to the client in 
            the place of the JST script.</p>
            <h2>Defining JST functions</h2>
            <p>New JST functions can be created via
                <a href="../../../api/goahead.html#group___webs_1gaafb69f988b3093c4981fd7bc94f1a42a">websDefineJst</a>.
            This binds a C function to a Javascript function. For example:
            <pre>
static getDate(int jid, Webs *wp, int argc, char **argv) {
    char *date = websGetDate(0);
    websWrite(wp, "%s", date);
    gfree(date);
}
<b>websDefineJst("date", getDate);</b></pre>
            <p>Once defined, JST pages can use the new <i>date</i> function:
            <pre>
Today's date is: &lt;% <b>date();</b> %&gt;
</pre>
        </div>
    </div>
<!-- BeginDsi "dsi/bottom.html" -->
	<div class="bottom">
		<p class="footnote"> 
            <a href="../../../product/copyright.html" >&copy; Embedthis Software LLC, 2003-2013.
            All rights reserved. Embedthis and Embedthis GoAhead are trademarks of Embedthis Software LLC.</a>
		</p>
	</div>
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript"> 
      google.load('search', '1', {language : 'en'});
      google.setOnLoadCallback(function() {
        var customSearchControl = new google.search.CustomSearchControl(
          '000262706376373952077:1hs0lhenihk');
        customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);
        var options = new google.search.DrawOptions();
        options.enableSearchboxOnly("http://embedthis.com/search.html");
        customSearchControl.draw('cse-search-form', options);
      }, true);
    </script>
</body>
</html>
